<template>
  <view class="wrap">
    <view class="box">
      <uv-navbar leftText="" :fixed="false" title="" leftIconColor='#FFF' bgColor='rgba(0,0,0,0)' safeAreaInsetTop placeholder autoBack> </uv-navbar>
      <view class="summary">
        <view class="bigTitle">{{ detail.name }}</view>
        <view class="desc">{{ detail.desc }}</view>
      </view>
      <view class="base">
        <view class="tabs">
          <uv-tabs :list="tabList" :current='active' :scrollable='false' itemStyle='height: 90rpx' lineWidth='36rpx' lineHeight='6rpx' lineColor='#E43222' activeStyle='font-weight: 500; font-size: 26rpx; color: #000;' inactiveStyle='font-weight: 400; font-size: 26rpx; color: #999999;' @click="tabClick"></uv-tabs>
        </view>
        <view class="theme" v-if="active == 0">
          <theme :detail='item' v-for="(item, index) in list" :key="index" @followClick='followClick' @tagMore='tagMore(item)'></theme>
        </view>
        <template v-if="active == 1">
          <answer :detail='item' :groupDetail='body' v-for="(item, index) in list" :key="index" @followClick='followClick' @tagMore='tagMore(item)'></answer>
        </template>
      </view>
    </view>
    <more ref="onMore" type='column' :themeType="active == 1 ? 'answer' : 'theme'" :column_id='id' @click="setList"></more>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { post } from '@/api';
import { useOrder } from '@/store';
import theme from '../../components/group/theme.vue';
import answer from '../../components/group/answer.vue';
import more from '../../components/group/more.vue';

const props = defineProps(['themeType']);

const onMore = ref(null);
const store = useOrder();
const body = ref(store.group);
const tabList = [
  {name: '主题贴' },
  {name: '问答贴' },
]
let active = ref(0);
let id = '';
let aid = ''
let detail = ref('');
let list = ref([]);
let last_page = 0;
let page = 1;
let limit = 15;

onLoad((option) => {
  id = option.id;
  aid = option.aid;
  getData();
})
// 上拉加载
onReachBottom(async () => {
  if(last_page < page || last_page == page) return;
  page++
  loading();
  await getList();
  uni.hideLoading();
})

function getData(){
  const params = {
    column_id: id
  }
  post('api/association_column/getAssociationColumnDetail', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      detail.value = data;
      getList();
    }
  })
}
function getList(){
  const params = {
    page,
    limit,
    association_id: aid,
    column_id: id
  }
  post('api/association_theme/getAssociationThemeList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      list.value = [...list.value, ...data.data];
    }
  })
}
function getList2(){
  const params = {
    page,
    limit,
    association_id: aid,
    column_id: id
  }
  post('api/association_question/getQuestionAnswerList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      list.value = [...list.value, ...data.data];
    }
  })
}
function followClick(row){
  list.value.forEach(e => {
    if(row.userId == e.user.id){
      e[row.type] = e[row.type] == 1 ? 0 : 1;
    }
  })
}
function setList(){
  page = 1;
  list.value = [];
  if(active.value == 0){
    getList();
  }else{
    getList2();
  }
}
function tagMore(row){
  onMore.value.user = body.value.member_info;
  onMore.value.detail = row;
  onMore.value.open();
}
function tabClick(value){
  active.value = value.index;
  if(value.index == 0){
    setList();
  }else{
    page = 1;
    list.value = [];
    getList2();
  }
}
</script>

<style lang="scss" scoped>
  .box{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 520rpx;
    background-image: linear-gradient(180deg, #FF312E 30%, #ff3b3400 100%);
    .base{
      width: 100%;
      background-color: #fff;
      border-radius: 40rpx 40rpx 0 0;
      /* #ifdef H5 */
      margin-top: 60rpx;
      /* #endif */
      /* #ifndef H5 */
      margin-top: 40rpx;
      /* #endif */
      position: relative;
      z-index: 3;
      padding: 0 30rpx;
    }
    .tabs{
      width: 100%;
    }
    .summary{
      padding: 0 30rpx;
      padding-top: 20rpx;
      .desc{
        font-weight: 400;
        font-size: 24rpx;
        color: #FFFFFF;
        min-height: 100rpx;
      }
      .bigTitle{
        font-weight: 500;
        font-size: 48rpx;
        color: #FFFFFF;
        padding-bottom: 10rpx;
      }
    }
  }
</style>